<template>
  <div class="container">
    <!-- 领取面膜页面 -->
    <div class="section">
      <div class="left">昵称</div>
      <input disabled
             class="inp"
             type="text"
             v-model="uname">
    </div>
    <div class="section">
      <div class="left">手机号</div>
      <input :disabled="show||project_status==4"
             class="inp"
             type="number"
             maxlength="11"
             v-model="tel"
             placeholder="请输入您的手机号">
    </div>
    <div class="section">
      <div class="left">地区</div>
      <picker :disabled="show"
              class="inppicker"
              mode="multiSelector"
              @change="multiPickerChange"
              @columnchange="multiPickerColumnChange"
              :value="multiIndex"
              :range="multiArray"
              :range-key="'name'">
        <input class="inpselect"
               disabled
               placeholder="请选择预约地区"
               v-model="location">
      </picker>
      <div class="icon"
           v-if="!show">
        <img :src="base_url+'/jifenshangcheng/xiangqingye/xiayibu@2x.png'"
             v-if="base_url"
             alt
             class="img">
      </div>
    </div>
    <div class="section"
         @tap="yzSelect1">
      <div class="left">领取时间</div>
      <picker :disabled="show||yzselect1"
              class="inppicker"
              mode="date"
              :start="currentdate"
              :end="end_time"
              @change="timeChange">
        <input class="inpselect"
               :class="{'tips':tips}"
               disabled
               placeholder="请选择领取时间"
               v-model="time">
      </picker>
      <div class="icon"
           v-if="!show">
        <img :src="base_url+'/jifenshangcheng/xiangqingye/xiayibu@2x.png'"
             v-if="base_url"
             alt
             class="img">
      </div>
    </div>
    <div class="section"
         @tap="yzSelect2">
      <div class="left">领取地点</div>
      <picker :disabled="show||yzselect2||yzselect3"
              class="inppicker"
              @change="pointChange"
              :range="region"
              :range-key="'name'">
        <input class="inpselect"
               disabled
               placeholder="请选择领取地点"
               v-model="point">
      </picker>
      <div class="icon"
           v-if="!show">
        <img :src="base_url+'/jifenshangcheng/xiangqingye/xiayibu@2x.png'"
             v-if="base_url"
             alt
             class="img">
      </div>
    </div>
    <div v-if="!show"
         class="save-btn"
         @tap="submit_booking()">提交</div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      uname: "",
      tel: "",
      location: "",
      time: "",
      currentdate: "",
      point: "",
      card_tid: "", //卡ID(对应详情页的tid)
      code_id: "", //码ID （卡ID）
      project_id: "", //项目id
      project_status: "", //项目状态
      hosipital_id: "", //预约医院ID
      id: "", //预约id
      region: [], //医院数组
      multiArray: [],
      multiIndex: [0, 0], //所选省市下标
      province_id: "", //所选省id
      city_id: "", //所选市id
      all_city: [], //省数组
      now_city: [], //市数组
      show: false, //false 编辑 true 查看
      tips: false, //已逾期重新选择时间提示
      yzselect1: true, //picker不可点击
      yzselect2: true, //picker不可点击
      yzselect3: true, //picker不可点击
      start_year: new Date().getFullYear() - 0, //当前年
      start_month: new Date().getMonth() - 0 + 1, //月
      start_date: new Date().getDate() - 0, //日
      end_time: "",
      endtime: 0 //结束时间
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    if (options) {
      this.project_status = options.project_status;
      this.card_tid = options.card_tid;
      this.project_id = options.project_id;
      this.code_id = options.card_id;
      //结束时间
      this.endtime = options.last_time;
      switch (options.project_status - 0) {
        case 0:
          //未使用 预约领取面膜
          this.show = false;
          wx.getStorage({
            key: "user_data",
            success: res => {
              this.uname = res.data.nickname;
            }
          });
          break;
        case 4:
          //  已逾期
          this.tips = true;
          this.time = "已逾期请重新选择时间";
          this.getData();
          break;
        case 5:
          //  待领取
          this.getData();
          this.show = true;
          break;
      }
    }
    wx.setNavigationBarTitle({
      title: "领取信息"
    });
  },
  onShow () {
    this.getProvince();
    this.getNowFormatDate(); //获取当前时间
  },
  methods: {
    //获取领取信息
    getData () {
      // 只有在已逾期和待领取才可以调用
      common.mmk_Loading(0);
      let that = this;
      common.fly_post(
        "api/v4_2/card_ticket/get_appintment_detail",
        {
          code_id: that.code_id,
          project_id: that.project_id
        },
        result => {
          let res = result.data;
          common.mmk_Loading(1);
          if (res.status_code == 0) {
            that.uname = res.data.user_name;
            that.tel = res.data.user_phone;
            that.location = res.data.province_name + res.data.city_name;
            that.province_id = res.data.province;
            that.city_id = res.data.city;
            that.point = res.data.name;
            that.hosipital_id = res.data.id;
            that.id = res.data.id;
            if (that.show) {
              this.time = new Date(res.data.appintment_time * 1000).Format(
                "yyyy年MM月dd日"
              );
            }
            this.getHosipital();
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //获取省市
    getProvince () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/card_ticket/get_area",
        {
          tid: this.card_tid
        },
        result => {
          let res = result.data;
          common.mmk_Loading(1);
          if (res.status_code == 0) {
            this.all_city = res.data;
            this.now_city = this.all_city[0].children;
            this.multiArray = [this.all_city, this.now_city];
            this.multiIndex = [0, 0];
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    multiPickerChange (e) {
      this.multiIndex = e.mp.detail.value;
      let location = [];
      location[0] = this.multiArray[0][this.multiIndex[0]].name;
      this.province_id = this.multiArray[0][this.multiIndex[0]].id; //所选省id
      location[1] = this.multiArray[1][this.multiIndex[1]].name;
      this.city_id = this.multiArray[1][this.multiIndex[1]].id; //所选市id
      this.location = location.join("");
      this.getHosipital();
      this.point = "";
    },
    multiPickerColumnChange (e) {
      if (e.mp.detail.column == 0) {
        this.now_city = this.all_city[e.mp.detail.value].children;
        this.multiIndex = [e.mp.detail.value, 0];
      }
      if (e.mp.detail.column == 1) {
        this.multiIndex[1] = e.mp.detail.value;
      }
      this.multiArray = [this.all_city, this.now_city];
    },
    //获取相应省市的医院
    getHosipital () {
      // common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/card_ticket/get_area_hosipital",
        {
          tid: this.card_tid,
          province: this.province_id,
          city: this.city_id
        },
        result => {
          let res = result.data;
          // common.mmk_Loading(1);
          if (res.status_code == 0) {
            if (res.data.length != 0) {
              this.region = [...res.data];
              this.yzselect3 = false;
            } else {
              this.yzselect3 = true;
            }
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    getNowFormatDate () {
      //获取开始日期
      this.currentdate = `${this.start_year}-${this.start_month}-${
        this.start_date
        }`;
      //获取结束日期
      if (this.endtime != 0) {
        let date = new Date(parseInt(this.endtime) * 1000);
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let D = date.getDate() + ' ';
        this.end_time = Y + M + D;
      } else {
        let y = this.start_year; //当前年
        let m = this.start_month; //月
        let d = this.start_date; //日
        //加一个月
        if (m < 12) {
          m = m + 1;
        }
        if (this.start_month == 12) {
          m = 1;
          y = y + 1;
        }
        // 判断日期
        if (m !== 2) {
          if ((m == 4 || m == 6 || m == 9 || m == 11) && d > 30) {
            d = 30;
          }
        } else {
          //判断是否是闰年
          if (((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) && d > 29) {
            d = 29;
          } else if (d > 28) {
            d = 28;
          }
        }
        this.end_time = y + "-" + m + "-" + d;
      }
    },
    //领取时间
    yzSelect1 () {
      if (this.location == "") {
        this.yzselect1 = true;
        common.mmk_Loading(2, "请先选择地区");
        return false;
      } else {
        this.yzselect1 = false;
      }
    },
    timeChange (e) {
      this.tips = false;
      let t = e.mp.detail.value.split("-");
      t = t[0] + "年" + t[1] + "月" + t[2] + "日";
      this.time = t;
    },
    //领取地点
    yzSelect2 () {
      if (this.location == "" || this.yzselect3 == true) {
        this.yzselect2 = true;
        common.mmk_Loading(2, "请重新选择地区");
        return false;
      } else if (this.time == "") {
        this.yzselect2 = true;
        common.mmk_Loading(2, "请先选择预约时间");
        return false;
      } else {
        this.yzselect2 = false;
      }
    },
    pointChange (e) {
      this.point = this.region[e.mp.detail.value].name;
      this.hosipital_id = this.region[e.mp.detail.value].id;
    },
    // 提交
    submit_booking () {
      //   if (this.uname.trim() == "") {
      //     common.mmk_Loading(2, "请输入昵称");
      //     return false;
      //   } else
      if (this.tel.trim() == "") {
        common.mmk_Loading(2, "请输入手机号");
        return false;
      } else if (this.location == "") {
        common.mmk_Loading(2, "请选择地区");
        return false;
      } else if (this.time == "") {
        common.mmk_Loading(2, "请选择领取时间");
        return false;
      } else if (this.point == "") {
        common.mmk_Loading(2, "请选择领取地点");
        return false;
      } else {
        let param = {};
        let url = "";
        switch (this.project_status - 0) {
          case 0:
            url = "api/v4_2/card_ticket/submit_project";
            param = {
              hosipital_id: this.hosipital_id,
              appointment_time: this.time,
              code_id: this.code_id,
              user_phone: this.tel,
              project_id: this.project_id,
              type: 1 //0 普通项目 1 面膜项目
            };
            break;
          case 4:
            url = "api/v4_2/card_ticket/update_appointment_mask";
            param = {
              hosipital_id: this.hosipital_id,
              appointment_time: this.time,
              id: this.id
            };
            break;
        }
        common.fly_post(url, param, result => {
          let res = result.data;
          if (res.status_code == 0) {
            wx.showToast({
              title: "预约成功", //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                setTimeout(() => {
                  wx.navigateBack({
                    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                  });
                }, 1500);
              }
            });
          } else {
            common.mmk_Loading(2, res.message);
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  .section {
    height: 44px;
    background-color: #fff;
    line-height: 44px;
    padding: 0 15px;
    border-top: 1px solid rgba(243, 243, 243, 1);
    display: flex;
    font-size: 14px;
    box-sizing: border-box;
    .inppicker {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      .inpselect {
        display: block;
        width: 140%;
        height: 130%;
      }
    }
    .tips {
      color: rgba(255, 56, 62, 1);
    }
    .left {
      font-size: 14px;
      font-family: "Medium";
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 44px;
      width: 90px;
    }
    .inp {
      flex: 1;
      height: 100%;
      line-height: 44px;
      padding-left: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .icon {
      color: #888888;
      width: 20px;
      height: 20px;
      .img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .save-btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgba(255, 56, 62, 1);
    text-align: center;
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>


